import Taro, { Component } from '@tarojs/taro'
import { Button } from '@tarojs/components'

import './index.less'

type ISDButtonProps = {
  loading: boolean
  type: 'light' | 'dark',
  height: number,
  disabled: boolean,
  onClick?: () => any
}

export default class SDButton extends Component<ISDButtonProps, {}> {

  static defaultProps = {
    loading: false,
    type: 'light',
    height: 90,
    disabled: false
  }

  static externalClasses = ['sd-class']

  render () {
    const { height, loading, type } = this.props
    const bgColor = type === 'light' ? 'background-color:#DFB77D;' : 'background-color:#4A4A4A;'
    return (
      // @ts-ignore
      <Button loading={loading} className='btn-clear _btn-normal sd-class' style={`height:${height}rpx;${bgColor}`} onClick={this.onBtnTaped}>
        { this.props.children }
      </Button>
    )
  }

  onBtnTaped = () => {
    const { loading, disabled } = this.props
    if (loading || disabled) {
      return
    }
    this.props.onClick && this.props.onClick()
  }
}
